<!-- 倒计时，无缝衔接轮播图，页面下滑时顶部栏样式改变 -->
<div class="imgBoxoul" style="left:5px; width: 32400px; position: absolute;">
  <div class="el-col el-col-24 gaoxiaolianmeng" style="width: 150px;">
    <a href="" target="_blank" class="school_wrap" @mouseover="stopMoveList" @mouseout="startMoveList">
        <div class="school_img">
            <img src="" class="image"></div>
        <div class="school_name"></div>
    </a>
  </div> 
</div>
<script>
  new Vue({
    el: '#app-home',
    data: function () {
      return { 
        visible: false, 
        activeName: 'first',
        options: [
          {
            value: '选项1',
            label: '岗位'
          }, {
            value: '选项2',
            label: '资讯'
          }
        ],
        value: '选项1',
        rightTopTab:1,
        moveList:1,
        timer:'',
        topHidding:true,
        nowDate:'',
        hour:0,
        minute:0,
        second:0,
        gaoxiaolianmengWidth: 0,
        timeOut: false,
      }
    },
    created:function(){
      // 复制自身并放在后面
      var sourceNode = document.querySelectorAll('.gaoxiaolianmeng');
      for (var i = 0; i < sourceNode.length; i++) {
        this.gaoxiaolianmengWidth += 150;
        var clonedNode = sourceNode[i].cloneNode(true);
        sourceNode[0].parentNode.appendChild(clonedNode);
      }
    },
    mounted:function(){
      // 轮播图开始移动
      this.startMoveList()

      // 滑轮向下滚动时顶部栏变色
      window.onscroll = function() {
        //为了保证兼容性，这里取两个值，哪个有值取哪一个
        //scrollTop就是触发滚轮事件时滚轮的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        // console.log("滚动距离" + scrollTop);
        if(scrollTop<=250){
          document.getElementById('header').classList.remove('topHidding');
          this.topHidding=true
          // 旧
          // document.getElementById('header').className=document.getElementById('header').className.split(' ')[0];
        }else{
          document.getElementById('header').classList.add('topHidding')
          this.topHidding=false
          // 旧
          // document.getElementById('header').className += ' topHidding';
          // document.querySelector('.downBox').style.height='0'
        }
      }

      // 倒计时
      var that=this
      setInterval(
        function(){
          that.newGetTime()
        } ,1000
      )
    },
    methods: {
      // 轮播图停止移动
      stopMoveList:function(){
        clearInterval(this.timer);
      },

      // 轮播图开始移动
      startMoveList: function () {
        var that=this;
        this.timer = setInterval(
          function () {
            if (document.querySelector('.imgBoxoul').offsetLeft > -(that.gaoxiaolianmengWidth)) {
              var moveSpeed = document.querySelector('.imgBoxoul').offsetLeft - 1
              document.querySelector('.imgBoxoul').style.left = moveSpeed + 'px'
            } else {
              // 在复制的自身到达初始位置时，将位置初始化
              document.querySelector('.imgBoxoul').style.left = 0 + 'px'
            }
          }, 15
        );
      },
      
      // 新倒计时，将时间戳转化为毫秒数，之后转为天数和时分秒
      newGetTime(){
        var nowtime = new Date(),  //获取当前时间
        endtime = new Date(document.querySelector('.Today_re .time').innerText) || new Date("2022-8-15");
        //endtime = new Date("2022-8-15");  //定义结束时间
        var lefttime = endtime.getTime() - nowtime.getTime()  //距离结束时间的毫秒数
        if (lefttime < 0) {
            this.timeOut = true
            return
        }
        leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)),  //计算天数
            lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),  //计算小时数
            leftm = Math.floor(lefttime / (1000 * 60) % 60),  //计算分钟数
            lefts = Math.floor(lefttime / 1000 % 60);  //计算秒数
        console.log(leftd + "天" + lefth + ":" + leftm + ":" + lefts)
        //返回倒计时的字符串
        lefth = leftd * 24 + lefth
        leftd = leftd < 10 ? "0" + leftd : leftd; // 如果只有一位，则前面补零
        lefth = lefth < 10 ? "0" + lefth : lefth; // 如果只有一位，则前面补零
        leftm = leftm < 10 ? "0" + leftm : leftm; // 如果只有一位，则前面补零
        lefts = lefts < 10 ? "0" + lefts : lefts; // 如果只有一位，则前面补零
        this.hour = lefth
        this.minute = leftm
        this.second = lefts
      },


























      oldStartTime(){
        var that=this
        setInterval(
          function(){
            that.getNowDate()
            that.hurryDate(that.nowDate,newDay)
          } ,1000
        )
      },
      // 旧倒计时，将时间戳转化为年月日时分秒，进行加减计算，（每月天数不一定，需要进一步计算）只能用于24小时内时间计算
      formatDate(date) {
        date = date.split("-")
        if (date[1].length === 1) {
          date[1] = '0' + date[1]
        }
        if (date[2].length === 1) {
          date[2] = '0' + date[2]
        }
        return date.join("-")
      },
      hurryDate(curdate, date) {
        if (new Date(date)/1000 - (new Date(curdate.replace(/-/g,'/'))) / 1000 >= 86400 || new Date(date)/1000 - (new Date(curdate.replace(/-/g,'/'))) / 1000 < 0) {
          // return (new Date('2022-8-16 12:12:12'))/1000 - (new Date(curdate.replace(/-/g,'/'))) / 1000
          return '超过24小时或已过时'
        }
        // console.log(date)
        curdate = this.changeFormat(curdate,0)
        date = this.changeFormat(date,0)
        // console.log(date,curdate)
        let hour = date[0] - curdate[0]
        let minute = date[1] - curdate[1]
        let second = date[2] - curdate[2]
        if (second < 0) {
          minute--
          second += 60
        }
        if (minute < 0) {
          hour--
          minute += 60
        }
        if (hour < 0) {
          hour+=24
        }
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
        // console.log(hour,minute,second)
        // return `${hour}:${minute}:${second}`
        this.hour=hour
        this.minute=minute
        this.second=second
      },
      changeFormat(date,type) {
        if(!type){
          date = date.split(' ')[1].split(':')
        }else{
          date = date.split('T')[1].split(':')
        }
        return date
      },
      changeFormatDay(date,type) {
        if(!type){
          date = date.split(' ')[0].split('-')
        }else{
          date = date.split('T')[0].split('-')
        }
        return date
      },
      getNowDate() {
        let date = new Date();
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月
        let day = date.getDate(); // 日
        let hour = date.getHours(); // 时
        let minute = date.getMinutes(); // 分
        let second = date.getSeconds(); // 秒
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
        this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        console.log(this.nowDate)
      },
    },
  })
</script>